<script setup>
import {reactive} from "vue";
import {Search} from "@element-plus/icons-vue";

// 订单数据
const tableData = reactive([
  {
    orderId: 123161635265,
    date: "2016-05-02",
    name: "王小虎",
    address: "上海市普陀区金沙江路 1518 弄",
    goodsName: "布欧格u型枕午休颈枕午睡神器趴趴枕靠枕颈椎护枕头飞机火车旅行脖枕 珐琅灰【磁石布料+记忆棉】 办公室睡觉坐车环绕支撑舒适",
    img: 'https://img10.360buyimg.com/N6/s60x60_jfs/t1/191364/29/37315/129945/65012930F34e3580c/092685b036d064c1.jpg',
    status: '待发货',
    price: '100',
  }
]);


</script>

<template>
  <div class="app">
    <!--标题栏-->
    <div class="my-order-title">我的订单</div>
    <!--主体-->
    <div class="order-box">
      <!--搜索过滤器-->
      <div class="filter">
        <!--类型筛选-->
        <el-button-group>
          <el-button autofocus text @click="">全部订单</el-button>
          <el-button text @click="">待付款</el-button>
          <el-button text @click="">已完成</el-button>
        </el-button-group>
        <!--搜索框-->
        <el-input
            v-model="input"
            class="search-box"
            placeholder="商品名称/商品编号/订单号"
            style="width: 400px;">
          <template #suffix>
            <el-button :icon="Search" type="text"/>
          </template>
        </el-input>
      </div>
      <!--表格-->
      <el-table :data="tableData" border stripe style="border: 1px solid #E5E5E5;">
        <el-table-column label="订单详情">
          <template #default="scope">
            <div class="order-item-detail">
              <div class="order-item-detail-title">
                <div>订单号：{{ scope.row.orderId }}</div>
                <div>{{ scope.row.date }}</div>
              </div>
              <div class="order-item-detail-goods">
                <el-image
                    :preview-src-list="[scope.row.img]"
                    :src="scope.row.img"
                    style="max-width: 250px;">
                </el-image>
                <div>{{ scope.row.goodsName }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="收件人" prop="name" width="150"/>
        <el-table-column label="金额" prop="price" width="150"/>
        <el-table-column label="全部状态" prop="status" width="150"/>
        <el-table-column label="操作" width="150px">
          <div class="order-item-operation">
            <el-button type="primary">确认收货</el-button>
            <el-button type="text">订单详情</el-button>
            <el-button type="text">删除订单</el-button>
          </div>
        </el-table-column>
      </el-table>
      <el-pagination :total="10" background layout="prev, pager, next" style="margin-left: auto;"/>
    </div>

  </div>

</template>

<style scoped>
@import "@/assets/History.css";

</style>